<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  	<!--定义好页面编码 -->
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--描述：这里定义好移动端的自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 模板</title>
    <!-- 引入好Bootstrap css样式文件 -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!--描述：引入js文件 记住一定要先引入JQuery的支持-->
    <script src="js/jquery-1.12.4.js"></script>
    <!-- 引入bootStrap的js文件-->
    <script src="js/bootstrap.js"></script>
    <!-- 引入JQuery验证框架-->
    <script src="js/validatejs/jquery.validate.js"></script>
    <script src="js/validatejs/jquery.metadata.js"></script>
    <script src="js/validatejs/messages_zh.js"></script>
    <script src="js/validatejs/additional-methods.js"></script> <!-- 注意导入顺序， additional-methods要放在最后-->
    <!-- 验证框架配置文件-->
    <script src="js/validatejs/JQvalidateFrame.js"></script>
  </head>
  <body>
  	<!-- 这里写代码-->
  	<div class="container">
  		<div class="row">
  			<div class="col-md-6" style="margin-top: 20px;">
  				<form action="" method="post" class="form-horizontal " id="userForm">
  					<fieldset>
  						<legend class="text-success"><span class="glyphicon glyphicon-user"></span>&nbsp;用户登录</legend>
  						<!-- 用户名-->
	  					<div class="form-group">
	  						<label class="control-label col-md-3" for="member.username">用户名<span class="text-danger">*</span></label>
	  						<div class="col-md-6" id="member.usernameDiv"> <!-- 注意要让布局样式好看基本上都放在div上面-->
	  							<input type="text" class="form-control " id="member.username" name="member.username">
	  						</div>
	  						<div class="col-md-3 text-left  " style="font-size: 18px; margin-left: -20px;" id="member.usernameMsg"></div>
	  					</div>
  						<!-- 密码-->
  						<div class="form-group">
	  						<label class="control-label col-md-3 " for="member.password">密&nbsp;&nbsp;&nbsp;码<span class="text-danger">*</span></label>
	  						<div class="col-md-6" id="member.passwordDiv"> <!-- 注意要让布局样式好看基本上都放在div上面-->
	  							<input type="text" class="form-control " id="member.password" name="member.password">
	  						</div>
	  						<div class="col-md-3 text-justify  " style="font-size: 18px; margin-left: -20px;" id="member.passwordMsg"></div>
	  					</div>
	  					<!-- 年龄-->
  						<div class="form-group">
	  						<label class="control-label col-md-3 " for="member.age">年&nbsp;&nbsp;&nbsp;龄<span class="text-danger">&nbsp;</span></label>
	  						<div class="col-md-6" id="member.ageDiv"> <!-- 注意要让布局样式好看基本上都放在div上面 并且使用验证框架的时候一定要设置name-->
	  							<input type="text" class="form-control " id="member.age" name="member.age">
	  						</div>
	  						<div class="col-md-3 text-justify" style="font-size: 18px; margin-left: -20px;" id="member.ageMsg"></div>
	  					</div>
	  				 <!-- 邮箱-->
  						<div class="form-group">
	  						<label class="control-label col-md-3 " for="member.email">邮&nbsp;&nbsp;&nbsp;箱<span class="text-danger">*</span></label>
	  						<div class="col-md-6" id="member.emailDiv"> <!-- 注意要让布局样式好看基本上都放在div上面-->
	  							<input type="text" class="form-control " id="member.email" name="member.email">
	  						</div>
	  						<div class="col-md-3 text-justify " style="font-size: 18px; margin-left: -20px;" id="member.emailMsg"></div>
	  					</div>
	  					<!-- 提交按钮-->
	  					<div class="form-group">
	  						<div class="col-md-6 col-md-offset-3">
	  							<input type="submit" class="btn btn-primary" value="提交">
	  							<input type="reset" class="btn btn-warning" value="重置">
	  						</div>
	  					</div>
  					</fieldset>
  				</form>
  			</div>
  		</div>
  	</div>
  </body>
</html>